<template>
  <div id="app">
    <!--    header start-->
    <van-nav-bar
      class="appNav"
      :title="title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"/>
    <!--    header end-->
    <!--    router start-->
    <keep-alive v-if="$route.meta.keepAlive">
      <router-view class="router"></router-view>
    </keep-alive>
    <router-view v-else class="router"></router-view>
    <!--    router end-->
    <!--    footer start-->
    <van-tabbar v-show="tabShow" v-model="active">
      <van-tabbar-item icon="home-o" to="/home"></van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/friends"></van-tabbar-item>
      <van-tabbar-item icon="cart-o" to="/cart" :badge="getCartCount"></van-tabbar-item>
      <van-tabbar-item icon="search" to="/search"></van-tabbar-item>
    </van-tabbar>
    <!--    footer end-->
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      title: this.$route.meta.title,
      tabShow: this.$route.meta.tabShow,
      active: this.$route.meta.active
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    }
  },
  watch: {
    '$route.meta' (meta) {
      this.title = meta.title
      this.tabShow = meta.tabShow
      this.active = meta.active
    }
  },
  computed: {
    getCartCount () {
      const cart = JSON.parse(localStorage.getItem('cart'))
      if (cart) {
        let count = 0
        cart.forEach(el => {
          if (el.selected) count += el.count
        })
        return count
      }
      return 0
    }
  }
}
</script>

<style lang="scss">
  html, body {
    height: 100%;
  }

  #app {
    height: 100%;
    padding-top: 46px;
    box-sizing: border-box;

    .appNav {
      width: 100%;
      position: fixed;
      top: 0;
      background: #ffffff;
      z-index: 999;
    }
  }
</style>
